<template>
    <div>
        <AutoComplete
                clearable
                size="large"
                v-model="searchValue"
                icon="ios-search"
                placeholder="请输入查询关键字"
                @keyup.enter.native="quickSearch">
            <div v-for="item in $store.getters.getkeywords" class="demo-auto-complete-item">
                <div v-if="item.menuId === menuId" class="demo-auto-complete-group">
                    <span>最近搜索过的关键字(仅支持显示10个)</span>
                    <a href="#" target="_blank"></a>
                </div>
                <Option v-if="item.menuId === menuId" v-for="option in item.children" :value="option.title" :key="option.title">
                    <span class="demo-auto-complete-title">{{ option.title }}</span>
                </Option>
            </div>
        </AutoComplete>
    </div>
</template>

<script>
    export default {
        props: {
            menuId: {
                type: Number,
                default: ''
            },
            // 查询路径
            baseURL: {
                type: String,
                default: ''
            },
            // 页码
            pageNumber: {
                type: Number,
                default: 1
            },
            // 每页大小
            pageSize: {
                type: Number,
                default: 0
            },
            // 排序
            order: {
                type: String,
                default: 'id desc'
            },
            // 默认过滤条件
            defaultFilters: {
                type: Array,
                default: function () {
                    return []
                }
            },
            // 列表属性
            columns: {
                type: Array,
                default: function () {
                    return []
                }
            }
        },
        data () {
            return {
                filters: [],
                searchValue: '',
                queryModel: {
                    mode: 'and',
                    pageNumber: this.pageNumber,
                    pageSize: this.pageSize,
                    order: this.order,
                    defaultFilters: this.defaultFilters,
                    filters: []
                }
            }
        },
        watch: {
            // 查询关键字
            searchValue: function (val, oldVal) {
                // 调用查询
                // this.searchConditions()
            },
            // 监听页码变化时调用查询
            'queryModel.pageNumber': function (val, oldVal) {
                this.search()
            },
            // 监听每页条数变化调用查询
            'queryModel.pageSize': function (val, oldVal) {
                this.search()
            }
        },
        methods: {
            // 快速查询
            quickSearch () {
                // 调用查询
                this.searchConditions()
                // 保存关键字
                this.addkeyword()
            },
            // 实时条件查询
            searchConditions () {
                // 清空已查询过滤条件
                this.queryModel.filters = []
                if (this.searchValue) {
                    this.queryModel.mode = 'or'
                    for (let filter of this.filters) {
                        if (filter.hasOwnProperty("key")) {
                            if (filter.hasOwnProperty("type")) {
                                if (filter.type.toUpperCase() !== 'DATE') {
                                    let field = filter['key']
                                    if (filter.hasOwnProperty("tableAlias")) {
                                        field = filter['tableAlias'] + '.' + field
                                    }
                                    let filterModel = {'field': field, 'value1': this.searchValue, 'operate': 'LIKE'}
                                    this.queryModel.filters.push(filterModel)
                                }
                            } else {
                                let field = filter['key']
                                if (filter.hasOwnProperty("tableAlias")) {
                                    field = filter['tableAlias'] + '.' + field
                                }
                                let filterModel = {'field': field, 'value1': this.searchValue, 'operate': 'LIKE'}
                                this.queryModel.filters.push(filterModel)
                            }
                        }
                    }
                    this.search()
                } else {
                    // 没有查询条件时默认查询所有
                    this.search()
                }
            },
            // 调用后台查询
            search () {
                let url = this.baseURL + '/search'
                this.$ajax.post(url, this.queryModel).then((response) => {
                    let {code, data, params} = response.data
                    if (code === 0) {
                        this.$emit('synchronize', data, params.totalSize)
                    }
                })
            },
            // 添加关键词
            addkeyword () {
                if (this.searchValue && this.searchValue !== '') {
                    let keywords = this.$store.getters.getkeywords
                    keywords.every((item, i) => {
                        if (item.menuId === this.menuId) {
                            let count = item.children.length
                            if (count >= 10) {
                                // 删除数组末尾的关键字
                                item.children.pop()
                            }
                            // 在数组首位添加关键字
                            item.children.unshift({
                                title: this.searchValue
                            })
                            return false
                        }
                        return true
                    })
                }
            },
            // 初始化关键词检索对象
            initkeyword () {
                let exist = false
                let keywords = this.$store.getters.getkeywords
                keywords.every(function (item, i) {
                    if (item.menuId === this.menuId) {
                        exist = true
                        return false
                    }
                    return true
                },this)
                if (!exist) {
                    keywords.push({
                        menuId: this.menuId,
                        children: []
                    })
                }
            },
            // 初始化
            init () {
                this.initkeyword()
                // 添加过滤条件
                this.columns.forEach((item) => {
                    this.filters.push(item)
                }, this)
                // 填充数据
                // this.search()
            }
        },
        mounted () {
            this.init()
        }
    }
</script>

<style>
    .demo-auto-complete-item{
        padding: 4px 0;
        border-bottom: 1px solid #F6F6F6;
    }
    .demo-auto-complete-group{
        font-size: 12px;
        padding: 4px 6px;
    }
    .demo-auto-complete-group span{
        color: #666;
        font-weight: bold;
    }
    .demo-auto-complete-group a{
        float: right;
    }
</style>
